<!DOCTYPE html>
<html>

<head>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            overflow: hidden;
            background-color: #0d0d0d;
        }

        .rain-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .raindrop {
            position: absolute;
            background: linear-gradient(transparent, #fff);
            height: 20px;
            width: 1px;
            opacity: 0;
            animation: fall 1s linear infinite;
        }

        @keyframes fall {
            0% {
                transform: translateY(-20px);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: translateY(100vh);
                opacity: 0.3;
            }
        }
    </style>
</head>

<body>
    <div class="rain-container" id="rainContainer"></div>
    <script>
        function createRaindrop() {
            const raindrop = document.createElement('div');
            raindrop.classList.add('raindrop');
            raindrop.style.left = Math.random() * 100 + 'vw';
            raindrop.style.animationDuration = (Math.random() * 0.5 + 0.5) + 's';
            document.getElementById('rainContainer').appendChild(raindrop);
            setTimeout(() => {
                raindrop.remove();
            }, 2000);
        }
        setInterval(createRaindrop, 50);
    </script>
</body>

</html>